<script setup>
import { toRefs, reactive } from 'vue';

const state = reactive({
  options: {
    licenseKey: 'MIT',
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3'],
    sectionsColor: ['#41b883', '#ff5f45', '#0798ec'],
    scrollOverflow: true,
  },
});

const getStaticIconFile = (name) => {
  return new URL(`../static/music/${name}.mp3`, import.meta.url).href;
};

const audio = new Audio(getStaticIconFile('nuan-nuan'));

const play = () => {
  audio.play();
};

const { options } = toRefs(state);
// https://github.com/alvarotrigo/vue-fullpage.js
</script>
<template>
  <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      <button @click="play()">Test music, autoPlay Failed</button>
      <button class="next" @click="$refs.fullpage.api.moveSectionDown()">Next</button> Section 1
    </div>
    <div class="section"><button class="prev" @click="$refs.fullpage.api.moveSectionUp()">Prev</button> Section 2</div>
  </full-page>
</template>
